// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../../common/styles/root-level-only/color-definitions.scss';
@import '../../common/styles/colors.scss';
@import '../../common/styles/common.scss';

#accessibility-insights-root-container {
    visibility: hidden !important;
}

.insights-gray-scale-container {
    filter: grayscale(100%) !important;
}

.insights-formatted-text-spacing-container {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;

    p {
        margin-bottom: 2em !important;
    }
}

.insights-pseudo-selector-style-container {
    *::before,
    *::after {
        border: 1px solid red;
    }
}

#accessibility-insights-root-container,
#insights-shadow-container {
    @mixin max-z-index-1 {
        z-index: 2147483646 !important;
    }

    @mixin max-z-index {
        z-index: 2147483647 !important;
    }

    @include max-z-index;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;

    .insights-dialog-container {
        @include max-z-index;

        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    div.insights-dialog-main-container {
        width: 25%;
        max-width: 25%;
        user-select: text;
        min-width: 520px;

        svg path {
            @media screen and (forced-colors: active) {
                forced-color-adjust: none !important;
                stroke: ButtonText !important;
                fill: ButtonText !important;
            }
        }
    }

    div.insights-file-issue-details-dialog-container {
        max-width: 370px;

        .ms-Dialog-content p {
            margin-block-start: 4px;
        }

        .ms-Dialog-actions {
            margin-top: 24px;
        }
    }

    #insights-inspect-selector-layout {
        z-index: 999999999 !important;
    }

    .insights-dialog-main-override .insights-dialog-main-container .ms-Dialog-title {
        padding-left: 19px;
    }

    .insights-dialog-main-override .insights-dialog-main-container .ms-Dialog-inner {
        padding-top: 0 !important;
        padding-right: 19px !important;
        padding-bottom: 20px !important;
    }

    .insights-dialog-main-override .insights-dialog-button-inspect svg path {
        fill: $primary-text !important;

        @media screen and (forced-colors: active) {
            fill: inherit !important;
        }
    }

    .insights-dialog-main-override .file-issue-button,
    .insights-dialog-main-override .copy-issue-details-button {
        margin-left: 8px !important;

        svg path {
            fill: $neutral-100 !important;
            fill-opacity: 0.9 !important;

            @media screen and (forced-colors: active) {
                fill: inherit !important;
            }
        }
    }

    .insights-dialog-main-override .file-issue-button,
    .insights-dialog-main-override .copy-issue-details-button,
    .insights-dialog-main-override .insights-dialog-button-inspect {
        svg path {
            @media screen and (forced-colors: active) {
                forced-color-adjust: none !important;
                stroke: ButtonText !important;
                fill: ButtonFace !important;
            }
        }
    }

    .insights-dialog-main-override .insights-dialog-button-inspect.is-disabled svg path {
        fill: $neutral-30 !important;

        @media screen and (forced-colors: active) {
            fill: inherit !important;
        }
    }

    .insights-dialog-main-override ul {
        margin-top: 3px !important;
    }

    .insights-dialog-main-override .insights-dialog-inspect-disabled {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        font-size: 12px !important;
        color: $negative-outcome !important;
        font-weight: $font-weight-semi-bold !important;
    }

    .insights-dialog-main-override .file-issue-button-help {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        font-size: 12px !important;
        color: $negative-outcome;
        font-weight: $font-weight-semi-bold;
    }

    .insights-dialog-main-override .copy-issue-details-button-help {
        margin-top: 4px !important;
        font-size: 12px !important;
        color: $negative-outcome !important;
        font-weight: $font-weight-semi-bold !important;
    }

    .insights-highlight-container,
    .insights-highlight-container svg {
        position: absolute !important;
        @include max-z-index-1;

        top: 0 !important;
        left: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        visibility: visible !important;
    }

    .insights-dialog-main-override {
        .insights-dialog-title {
            margin-bottom: 16px !important;
            padding-bottom: 0 !important;
            color: $primary-text !important;
            font-size: 21px !important;
            font-weight: $font-weight-semi-bold !important;
            letter-spacing: -0.02em !important;
        }

        .insights-dialog-section-title {
            margin-top: 16px !important;
            margin-bottom: 4px !important;
            color: $primary-text !important;
            font-size: 15px !important;
            font-weight: $font-weight-semi-bold !important;
        }

        .insights-dialog-content {
            color: $secondary-text !important;
            font-size: 14px !important;

            ul {
                margin-top: 8px !important;
                margin-right: 8px !important;
                margin-bottom: 0 !important;
                margin-left: 8px !important;
                padding-left: 8px !important;
            }
        }

        .insights-dialog-target-button-container {
            margin-top: 16px !important;

            button {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            .ms-Button-label {
                margin-left: 4px !important;
                margin-right: 4px !important;
                line-height: 100% !important;
                font-weight: $font-weight-semi-bold !important;
            }

            svg {
                margin-left: 4px !important;
                margin-right: 4px !important;
            }
        }

        .insights-dialog-next-and-back-container {
            margin-top: 16px !important;
            display: grid !important;
            color: $primary-text !important;
            font-size: $font-size-m !important;
            align-items: center !important;
            grid-template-columns: 100px 1fr 100px !important;

            :nth-child(1) {
                text-align: left !important;
            }

            :nth-child(2) {
                text-align: center !important;
            }

            :nth-child(3) {
                text-align: right !important;
            }
        }
    }

    .insights-highlight-container {
        .insights-highlight-box {
            visibility: visible !important;
            position: absolute !important;
            overflow: hidden !important;
            pointer-events: none !important;
        }

        // This applies to both the text in highlight boxes and also the text
        // in highlight circled used for tab/focus visualizers
        .insights-highlight-text {
            @include ms-high-contrast-override {
                // Note that forced-color-adjust: none is required for highlight box labels'
                // outline/box-shadows to be inherited correctly in HC mode, in addition to being
                // required for color and background-color
                forced-color-adjust: none;
                color: HighlightText !important;
                background-color: Highlight !important;
            }
        }

        .insights-highlight-box .insights-highlight-text {
            cursor: default !important;
            pointer-events: all !important;
            font-size: 1em !important;
            padding: 0.3em !important;
            float: right !important;
            position: relative !important;
            text-align: center !important;

            // This results in the highlight box outline appearing to also run down the left edge of
            // the label
            outline: inherit !important;
            outline-offset: inherit !important;
            box-shadow: inherit !important;
        }

        .insights-highlight-outline-solid {
            // Non-HC outline-color is intentionally unset; individual formatters should override it
            outline-width: 2px !important;
            outline-style: solid !important;
            outline-offset: 1px !important;
            box-shadow: 0 0 0 4px white !important;

            @include ms-high-contrast-override {
                forced-color-adjust: none;
                outline-color: Highlight !important;
                box-shadow: 0 0 0 4px HighlightText !important;
            }
        }

        .insights-highlight-outline-dashed {
            // Non-HC outline-color is intentionally unset; individual formatters should override it
            outline-width: 2px !important;
            outline-style: dashed !important;
            outline-offset: 1px !important;
            box-shadow: 0 0 0 4px white !important;

            @include ms-high-contrast-override {
                forced-color-adjust: none;
                outline-color: Highlight !important;
                box-shadow: 0 0 0 4px HighlightText !important;
            }
        }
    }

    :host {
        @include max-z-index-1;

        top: 0 !important;
        left: 0 !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
